<!--
 * @Author: Dorange.Wang
 * @Date: 2021-04-29 09:27:22
 * @LastEditors: wangming
 * @LastEditTime: 2021-08-27 16:12:19
 * @Description: file content
-->
<template>
  <div class="content">
    <slot />
    <el-tag
      class="name-tag"
      size="medium"
      closable
      v-for="item in groupList"
      :key="item.id"
      type="info"
    >{{ item.preFileName }}</el-tag>
    <i class="el-icon-setting btn-icon" @click="handleConfigRule"></i>
    <rule-editor ref="ruleEditor"></rule-editor>
  </div>
</template>

<script>
import ruleEditor from '../ruleEditor/ruleEditor'

export default {
  components: {
    ruleEditor
  },
  props: {
    modelItem: {}
  },
  data () {
    return {
      groupList: []
    }
  },
  methods: {
    handleConfigRule () {
      const dialog = this.$refs.ruleEditor
      dialog.init(this.modelItem)
    }

  }
}
</script>

<style lang="scss" scoped>
.content {
  margin-right: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.name-tag {
  margin-right: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.btn-icon {
  font-size: 18px;
  color: #409eff;
  font-weight: bold;
  cursor: pointer;
}
</style>
